<template>
  <div class="commodity" style="background: #f3f4f6">
    <div class="biath">
      <div class="subwrap">
        <ul>
          <li
            v-for="item, index in p"
            :class="{ active: count === index }"
            @click="ClickTabList(item, index)"
            :key="index"
          >
            <a href="#">{{ item }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="location-box clearfix">
      <div class="fl">
        您现在的位置：<a href="#" id="nav_title">穿越火线</a
        >&nbsp;&nbsp;&gt;&nbsp;<span id="loc_list_cate">全部道具</span>
      </div>
    </div>
    <div class="layout">
      <div class="left">
        <div class="sidebar">
          <h3>热门排行</h3>
          <ul>
            <li v-for="(item, index) in d" :key="item.id">
              <div class="comico ico-rank">{{ index + 1 }}</div>
              <div class="djimg fl">
                <img :src="item.img" width="77" height="54" alt="修改昵称" />
              </div>
              <div class="djinfo fr">
                <p class="djname">{{ item.title }}</p>
                <p class="djprice">{{ item.price }} Q币</p>
                <p class="djcpri" style="font-size: 12px; display: none">
                  微信价：<strong>￥14.55 </strong>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="right" style="position: relative; background: #fff">
        <div class="filter-box">
          <div class="filter-item clearfix">
            <div id="ct_list_search_bar" class="fl">
              <label>关键字：</label
              ><input
                type="text"
                id="ipt_list_search_keyword"
                class="input-txt"
                style="margin-left: 3px"
                v-model="key"
              />
            </div>
            <div
              id="ct_list_price_bar"
              class="fl ml20"
              style="text-align: left"
            >
              价格区间(QB)：<input
                id="ipt_list_price_from"
                type="text"
                class="input-area-txt"
                v-model="min"
              /><label> -</label>
              <input
                id="ipt_list_price_to"
                type="text"
                class="input-area-txt"
                v-model="max"
              />
            </div>
            <div class="fl">
              <a
                href="#"
                class="btn-sure ml10"
                id="btn_list_search"
                title="确定"
                @click="shangJia3"
                >确定</a
              >
            </div>
          </div>
          <div class="filterlist mt20 clearfix">
            <div id="ct_list_order_bar" class="order-span fl">
              <a
                :class="{ current: s1 }"
                href="#"
                data-order="dtShowBegin"
                data-order-default="desc"
                @click="shangJia"
                >上架时间</a
              >
              <a
                href="#"
                data-order="lTotalBuyNum"
                data-order-default="desc"
                @click="shangJia1"
                :class="{ current: s2 }"
                >销量<em
                  class="comico btn-filter-down"
                  data-default-arrow="btn-filter-down"
                ></em
              ></a>
              <a
                href="#"
                data-order="iPrice"
                data-order-default="asc"
                @click="shangJia2"
                :class="{ current: s3 }"
                >价格<em
                  class="comico btn-filter-up"
                  data-default-arrow="btn-filter-up"
                ></em
              ></a>
            </div>
            <div class="fr" style="display: none">
              <select id="sel_list_tktret">
                <option value="购物点信息">购物点信息</option>
                <option value="购物点支付">购物点支付</option>
                <option value="返购物点">返购物点</option>
              </select>
            </div>
          </div>
        </div>
        <div class="listbox">
          <div id="blk_list_list" v-if="o">
            <ul>
              <li v-for="item in a" :key="item.id">
                <img
                  :src="item.img"
                  width="166"
                  height="118"
                  alt="MK23-湛蓝裂痕（永久）"
                  @click="xq(item.id)"
                />
                <a
                  href="#"
                  class="djname"
                  target="_blank"
                  title="MK23-湛蓝裂痕（永久）"
                  ><strong
                    >{{ item.title }}&nbsp;&nbsp;({{ item.count
                    }}{{ item.unit }})</strong
                  ></a
                >
                <div class="bxlist-t1">
                  <span class="t2 fwb">&nbsp;&nbsp;&nbsp;</span
                  ><span class="t2 fwb">{{ item.price }}</span
                  ><span class="t2 fwb"> Q币</span>
                </div>
                <div class="bxlist-t2 c">
                  <el-button
                    class="btn-red buy-now"
                    type="text"
                    @click="(dialogVisible = true), (c = item)"
                    >立即购买</el-button
                  >
                </div>
              </li>
            </ul>
          </div>
          <div class="ppbDao" v-else>
            <div class="table_td">
              <div class="pic"></div>
              <div class="txt">
                <p class="tt">没有匹配道具！</p>
                <p>您可以：</p>
                <p>1、请修改筛选条件</p>
                <p>
                  2、<a class="blue" style="color: #1994eb;text-decoration: none;" target="_self" href="#"
                    >点这里进入显示全部道具&gt;</a
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          style="
            text-align: center;
            background: #fff;
            padding: 20px 20px;
            position: absolute;
            margin-left: -477px;
            left: 50%;
            bottom: -68px;
            width: 913px;
          "
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="c"
          :page-sizes="[5, 10, 20]"
          :page-size="limit"
          :current-page="page"
          @current-change="pageChange"
          @size-change="sizeChange"
        />
      </div>
    </div>
    <el-dialog
      title="加入购物车"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="tc">
        <div class="left">
          <img
            class="pop-djimg"
            :src="c.img"
            width="100"
            height="71"
            alt="修改昵称"
          />
          <p>{{ c.title }}</p>
        </div>
        <div class="right">
          <div class="comico a">
            价格：<span class="goods-price orange">{{ c.price }}</span
            ><span class="orange">Q币</span>
          </div>
          <div class="comico">
            期限：<span class="font_red sTime_btn" attr_iseqid="3655">{{
              c.count + c.unit
            }}</span>
          </div>
          <div class="comico">
            数量：
            <div class="goods-amount fl">1个</div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddShopping_cart(c.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryGoodsList,
  queryGrounding,
  queryVolume,
  queryPrice,
  queryKey,
  queryKeyPrice,
  queryPriceOrPrice,
  queryAll,
  queryAddShopping_cart,
  queryHotSort,
  queryClickTabList
} from '@/api/goods'
// 表格分页的mixins
export default {
  data () {
    return {
      dialogVisible: false,
      c: 0,
      a: [],
      b: [],
      d: [],
      // 搜索查询参数
      page: 1, // 每页条数
      limit: 20, // 总条数
      s1: true,
      s2: false,
      s3: false,
      lzy: 0,
      volume: 'desc',
      jg: false,
      xl: 'desc',
      sb: false,
      key: '',
      max: undefined,
      min: undefined,
      p: [
        '全部道具',
        '武器',
        '道具',
        '宝箱',
        '角色&道具',
        '投掷武器',
        '功能性道具',
        '道 具',
        '主武器',
        '近战武器'
      ],
      o: true,
      count: 0,
      aa: 0
    }
  },
  mounted () {
    this.queryData()
    this.queryAll()
    this.HotSort()
    this.$store.dispatch('cart/getCartList')
    this.ppbDaoNr()
  },
  methods: {
    async queryData () {
      const res = await queryGoodsList({ page: this.page, limit: this.limit })
      this.a = res
      this.ppbDaoNr()
    },
    async queryAll () {
      const res = await queryAll()
      this.c = res.length
      this.aa = res.length
    },
    // 获取表格数
    pageChange (page) {
      // 1. 保存页码 // 2. 重新获取数据
      this.page = page
      console.log(page)
      if (this.lzy === 0) {
        this.queryData()
      }
      if (this.lzy === 1) {
        this.shangJia()
      }
      if (this.lzy === 2) {
        this.shangJia1()
      }
      if (this.lzy === 3) {
        this.shangJia2()
      }
      if (this.lzy === 4) {
        this.shangJia3()
      }
    }, // 每页条数发生改变
    sizeChange (limit) {
      // 1. 保存每页条数
      this.limit = limit // 1.1 还原页码
      if (this.lzy === 0) {
        this.queryData()
      }
      if (this.lzy === 1) {
        this.shangJia()
      }
      if (this.lzy === 2) {
        this.shangJia1()
      }
      if (this.lzy === 3) {
        this.shangJia2()
      }
      if (this.lzy === 4) {
        this.shangJia3()
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async shangJia () {
      this.lzy = 1
      this.s2 = false
      this.s3 = false
      this.s1 = true
      const res = await queryGrounding({ page: this.page, limit: this.limit })
      this.a = res
    },
    async shangJia1 () {
      this.s1 = false
      this.s2 = true
      this.s3 = false
      this.lzy = 2
      this.jg = !this.jg
      if (this.jg) {
        this.volume = 'desc'
      } else {
        this.volume = 'asc'
      }
      const res = await queryVolume(
        { page: this.page, limit: this.limit },
        this.volume
      )
      this.a = res
    },
    async shangJia2 () {
      this.s1 = false
      this.s3 = true
      this.s2 = false
      this.lzy = 3
      this.sb = !this.sb
      if (this.sb) {
        this.xl = 'desc'
      } else {
        this.xl = 'asc'
      }
      const res = await queryPrice(
        { page: this.page, limit: this.limit },
        this.xl
      )
      this.a = res
    },
    async shangJia3 () {
      this.a = []
      this.lzy = 4
      if (this.key === '' && this.max === undefined && this.min === undefined) {
        this.queryData()
        this.c = this.aa
      }
      if (this.key !== '' && this.max === undefined && this.min === undefined) {
        const res = await queryKey({
          page: this.page,
          limit: this.limit,
          name: this.key
        })
        this.c = res.length
        this.page = 1
        this.a = res
        this.ppbDaoNr()
      } else if (
        this.key === '' &&
        this.max !== undefined &&
        this.min !== undefined
      ) {
        const res = await queryKeyPrice({
          page: this.page,
          limit: this.limit,
          max: this.max,
          min: this.min
        })
        this.c = res.length
        this.page = 1
        this.a = res
        this.ppbDaoNr()
      } else if (
        this.key !== '' &&
        this.max !== undefined &&
        this.min !== undefined
      ) {
        const res = await queryPriceOrPrice({
          page: this.page,
          limit: this.limit,
          name: this.key,
          max: this.max,
          min: this.min
        })
        this.c = res.length
        this.page = 1
        this.a = res
        this.ppbDaoNr()
      }
    },
    async AddShopping_cart (id) {
      this.dialogVisible = false
      await queryAddShopping_cart(id)
      this.$store.dispatch('cart/getCartList')
      this.$message.success('添加成功')
    },
    async HotSort () {
      const res = await queryHotSort()
      this.d = res
    },
    async ClickTabList (item, index) {
      const res = await queryClickTabList({
        page: this.page,
        limit: this.limit,
        title: item
      })
      this.c = res.length
      this.a = res
      if (item === '全部道具') {
        this.queryData()
      }
      this.count = index
      this.ppbDaoNr()
    },
    ppbDaoNr () {
      if (!this.a.length) {
        this.o = false
      } else {
        this.o = true
      }
    },
    xq (id) {
      console.log(id)
      this.$router.push({
        path: '/details',
        query: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.biath {
  .subwrap {
    width: 1200px;
    height: 52px;
    background: #ddd;
    margin: 0 auto;
    ul {
      display: flex;
      li {
        width: 118px;
        height: 52px;
        text-align: center;
        line-height: 52px;
        a {
          display: block;
          font-size: 14px;
          text-decoration: none;
          color: #222;
        }
      }
      li:hover {
        a {
          color: #ff5900;
        }
      }
      .active {
        border-bottom: 2px solid #ff5900;
        a {
          color: #ff5900;
        }
      }
    }
  }
}
.location-box {
  margin: 24px auto 8px;
  width: 1200px;
  color: #606060;
  height: 18px;
  position: relative;
  zoom: 1;
  cursor: pointer;
}
.layout {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .left {
    width: 229px;
    margin-top: 10px;
    .sidebar {
      padding: 0 13px 0 0;
      background: #fff;
      height: auto;
      h3 {
        margin-left: 18px;
        font-size: 16px;
        color: #555;
        font-weight: normal;
        height: 47px;
        border-bottom: 1px solid #f3f4f6;
        line-height: 54px;
        text-indent: 6px;
        position: relative;
      }
      ul {
        width: 195px;
        margin: 0 auto;
        li {
          width: 195px;
          height: 70px;
          display: flex;
          border-bottom: 1px dashed #e7e7e7;
          padding-top: 15px;
          position: relative;
          .ico-rank {
            position: absolute;
            top: 8px;
            left: 0;
            z-index: 1;
            display: block;
            width: 20px;
            height: 24px;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            color: #fff;
          }
          .comico {
            background: url(//js01.daoju.qq.com/mall/images/channelmall/cf/comico.png)
              no-repeat;
            background-position: -5px -592px;
          }
          .djimg {
            margin-left: 3px;
          }
          .djinfo {
            margin-left: 5px;
          }
        }
      }
    }
    #zblist {
      padding: 0 13px 0 0;
      background: #fff;
      height: auto;
      margin-top: 10px;
      h3 {
        margin-left: 18px;
        font-size: 16px;
        color: #555;
        font-weight: normal;
        height: 47px;
        border-bottom: 1px solid #f3f4f6;
        line-height: 54px;
        text-indent: 6px;
        position: relative;
      }
      ul {
        width: 229px;
        margin: 0 auto;
        li {
          width: 192px;
          height: 262px;
          margin: 0 auto;
          border-bottom: 1px dashed #e7e7e7;
          .prodimg {
            width: 192px;
            height: 184px;
            margin: 0 auto;
            overflow: hidden;
            img {
              display: block;
              width: 192px;
              height: 184px;
            }
          }
          .prodinfo {
            margin-top: 10px;
            font-size: 14px;
            .prodname {
              width: 192px;
              height: 15px;
              color: #535353;
              line-height: 15px;
              text-align: left;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin: 0 auto;
            }
            .prodpri {
              width: 192px;
              height: 15px;
              margin: 0 auto;
              margin-top: 8px;
              text-align: left;
              color: #f74a4a;
              font-weight: bold;
              line-height: 14px;
            }
          }
        }
        .li {
          border: 0;
        }
      }
      .morebox {
        margin-top: -20px;
        width: 100%;
        height: 30px;
        .prod-more {
          line-height: 25px;
          display: block;
        }
        .fr {
          float: right;
        }
      }
    }
    #blk_detail_history {
      margin-top: 10px;
      padding: 0 13px 0 0;
      background: #fff;
      height: auto;
      h3 {
        margin-left: 18px;
        font-size: 16px;
        color: #555;
        font-weight: normal;
        height: 47px;
        border-bottom: 1px solid #f3f4f6;
        line-height: 54px;
        text-indent: 6px;
        position: relative;
      }
      .viewbuy-box {
        height: auto;
        margin-left: 20px;
        li {
          min-height: 71px;
          height: auto;
          border-bottom: 1px dashed #e7e7e7;
          -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
          a {
            display: block;
            width: 100%;
            padding-top: 15px;
            position: relative;
            display: flex;
            .djinfo {
              width: 108px;
              overflow: hidden;
              color: #3a3f4a;
              margin-left: 10px;
              .djname {
                width: 108px;
                font-size: 12px;
                font-weight: bold;
                height: 14px;
                line-height: 12px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .djprice {
                margin-top: 8px;
                height: 15px;
              }
            }
          }
        }
        .li {
          border: 0;
        }
      }
      .sidebar-tip {
        display: block;
        text-align: center;
        margin-top: 10px;
        line-height: 13px;
        padding-bottom: 15px;
      }
    }
  }
  .right {
    width: 952px;
    .filter-box {
      width: 100%;
      height: 106px;
      background-color: #fff;
      margin-bottom: 20px;
      .filter-item {
        padding: 18px 15px 0 15px;
        display: flex;
        .input-txt {
          height: 24px;
          border: 1px solid #ccc;
          width: 338px;
          padding: 0 2px;
        }
        .ml20 {
          margin-left: 20px;
        }
        .input-area-txt {
          height: 24px;
          border: 1px solid #ccc;
          width: 34px;
          margin: 0 3px;
          padding: 0 2px;
        }
        .btn-sure {
          background: #f5f5f5;
          width: 44px;
          height: 24px;
          line-height: 24px;
          display: inline-block;
          overflow: hidden;
          border: 1px solid #ccc;
          color: #222;
          font-size: 12px;
          text-align: center;
          text-decoration: none;
        }
        .ml10 {
          margin-left: 10px;
        }
      }
      .filterlist {
        padding: 0 18px;
        height: 28px;
        line-height: 28px;
        .order-span {
          display: inline-block;
          height: 26px;
          line-height: 26px;
          color: #2e2e2e;
          font-size: 14px;
          a {
            margin: -2px 30px 0 0;
            height: 28px;
            line-height: 28px;
            float: left;
            color: #222;
            width: 56px;
            display: block;
            position: relative;
            text-align: center;
            font-size: 14px;
            em {
              margin: 0 0 0 4px;
              width: 10px;
              height: 8px;
              overflow: hidden;
              display: inline-block;
              vertical-align: middle;
            }
            .comico {
              background: url(//js01.daoju.qq.com/mall/images/channelmall/cf/comico.png)
                no-repeat;
            }
            .btn-filter-down {
              background-position: -25px -71px;
            }
            .btn-filter-up {
              background-position: -40px -72px;
            }
          }
          a.current {
            color: #f74a4a;
          }
        }
      }
      .mt20 {
        margin-top: 20px;
      }
    }
    .listbox {
      width: 100%;
      background-color: #fff;
      #blk_list_list {
        padding-top: 17px;
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            margin: 0 auto;
            padding-top: 42px;
            zoom: 1;
            width: 236px;
            height: 284px;
            display: block;
            position: relative;
            color: #606060;
            z-index: 11;
            cursor: default;
            border-right: 1px solid #f3f4f6;
            border-bottom: 1px solid #f3f4f6;
            background: #fff;
            img {
              margin: 0 auto;
              display: block;
              width: 166px;
              height: 118px;
            }
            .djname {
              text-align: center;
              display: block;
              margin: 0 auto;
              margin-top: 10px;
              color: #2e2e2e;
              width: 220px;
              height: 24px;
              line-height: 20px;
              cursor: pointer;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .bxlist-t1 {
              color: #f74a4a;
              font-size: 14px;
              font-weight: 800;
              text-align: center;
            }
            .bxlist-t2 {
              margin: 10px auto 0;
              width: 124px;
              height: 32px;
              .buy-now {
                width: 124px;
                height: 32px;
                text-align: center;
                padding: 0;
              }
              .btn-red {
                background: #ff5900;
                color: #fff;
                display: block;
              }
            }
          }
          li:nth-child(4n) {
            border-right: 0 !important;
          }
        }
      }
      .ppbDao {
        width: 100%;
        height: 200px;
        .table_td {
          width: 540px;
          height: 115px;
          margin: 0 auto;
          display: flex;
          padding-top: 20px;
          .pic {
            width: 100px;
            height: 100px;
            background: url(//js02.daoju.qq.com/common/images/emotion.png)
              no-repeat;
          }
          .txt {
            margin-left: 20px;
            line-height: 24px;
            .tt {
              font-weight: 700;
              font-size: 14px;
              color: #333;
              padding-bottom: 10px;
            }
          }
        }
      }
    }
  }
}
.tc {
  display: flex;
  .left {
    width: 200px;
    text-align: center;
  }
  .right {
    .comico {
      height: 30px;
      display: flex;
      .orange {
        color: #ff5900;
      }
      .goods-price {
        font-weight: 900;
      }
      .goods-amount {
        width: 74px;
        height: 24px;
        display: block;
        overflow: hidden;
        a.goods-minus,
        a.goods-plus {
          display: block;
          float: left;
          width: 16px;
          height: 22px;
          border: none;
          background: #f0f0f0;
          border: 1px solid #f0f0f0;
          text-align: center;
          line-height: 22px;
        }
        input {
          width: 36px;
          text-align: center;
          float: left;
          border: none;
          background-color: transparent;
          height: 22px;
          line-height: 22px;
          color: #222;
          border: 1px solid #ddd;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
